<style>
html, body {
  height: 560px;
  overflow: hidden;
}

.required {
  color: red;
}

.help-validate {
  position: absolute;
  top: 7px;
  right: 25px;
}

.help-block {
  margin-top: 0px;
}

#upload_div_avatar {
  width: 128px;
  height: 128px;
  background: #EEEEEE;
  text-align: center;
  line-height: 128px;
}
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form @submit.prevent="update()" accept-charset="UTF-8" class="form m-t" id="dataForm" method="post">
            <input name="id" type="hidden" v-model="staffInfo.id"/>
            <div class="col-md-12">
              <div class="col-md-5 col-sm-5">
                <div class="form-group clearfix">
                  <label class="col-md-4 control-label"><span class="required">*</span>姓名：</label>
                  <div class="col-md-8">
                    <input aria-describedby="bean-name-error" aria-invalid="true" aria-required="true" class="form-control" id="bean-name" maxlength="55" name="name" placeholder="请输入名称" required="" type="text" autocomplete="off" v-model="staffInfo.name">
                    <span class="help-validate help-block m-b-none" for="bean-name" id="bean-name-error"></span>
                  </div>
                </div>
                <div class="form-group clearfix">
                  <label class="col-md-4 control-label"><span class="required">*</span>手机：</label>
                  <div class="col-md-8">
                    <input aria-describedby="bean-cellphone-error" aria-invalid="true" aria-required="true" class="form-control" id="bean-cellphone" maxlength="11" minlength="11" name="cellphone" placeholder="请输入手机号" required="" type="text" autocomplete="off" v-model="staffInfo.cellphone">
                    <span class="help-validate help-block m-b-none" for="bean-cellphone" id="bean-cellphone-error"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div style="width: 200px; margin: 0 auto;text-align: center;">
                <input class="btn btn-primary" type="submit" value="更新"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'
import {$storage, axiosContentType, site} from '@/assets/js/boss'

export default {
  data() {
    return {
      staffInfo: {}
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    that.staff.init(() => {
      $('#dataForm').validate();
      axios.post(site.staff.info + that.staffInfo.id, {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          let staffInfo = result.data;
          delete staffInfo.password;
          $storage.setItem('staff', JSON.stringify(staffInfo));
          that.staffInfo = staffInfo;
        } else {
          alert(result.message);
        }
      });
    });
  },
  methods: {
    update() {
      let that = this;
      if ($('#dataForm').valid()) {
        axios.post(site.staff.ownUpdate, $('#dataForm').serialize()
            , axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            alert('保存成功!');
            if (window.top !== window.self) {
              window.top.$vueApp.staffInfo.avatar = $('input[name="avatar"]').val();
            }
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    }
  }
}
</script>

